<template>
	<view class="pop-content-item">
		<view class=" pop-content-item-left" :style="widthReal">{{itemName}}</view>
		<view class="pop-content-item-rigth-all">
			<view :class="[isBlackReal?'pop-content-item-rigth-black': 'pop-content-item-rigth',fontWeightReal?'pop-content-item-rigth-weight': '']">{{itemContent}}</view>
		</view>


	</view>
</template>
<script>
	export default {
		name: "PopTableItem",
		props: ["itemName", "itemContent", "itemShow", 'width', 'isBlack', 'fontWeight'],
		data() {
			return {
				itemShowReal: this.itemShow === undefined ? true : this.itemShow, //默认显示
				isBlackReal: this.isBlack === undefined ? false : this.isBlack,
				fontWeightReal: this.fontWeight === undefined ? false : this.fontWeight,
				widthReal: {
					width: this.width === undefined ? '20%' : this.width
				}
			};
		},
		created() {

		},
		methods: {


		},
		watch: {

		}
	};
</script>

<style scoped lang="scss">
	.pop-content-item {
		display: flex;
		width: 100%;
		align-items: center;
		border-bottom: 1px solid #eee;
		text-align: left;
		background-color: #F6F7F8;

		.pop-content-item-left {
			padding: 15rpx 0 15rpx 25rpx;
			width: 28%;
		}

		.pop-content-item-rigth-all {
			background-color: #FFFFFF;
			text-align: left;
			padding: 15rpx 15rpx 15rpx 25rpx;
			flex: 1;
			color: #333333;

		}

		.pop-content-item-rigth {
			background-color: #FFFFFF;
			text-align: left;
			// padding: 15rpx;
			flex: 1;
			color: #333333;

		}

		.pop-content-item-rigth-weight {
			font-weight: 550;
		}

		.pop-content-item-rigth-black {
			background-color: #95C0FB;
			text-align: left;
			color: #FFFFFF;
			display: inline-block;
			padding: 0 10rpx;
			font-weight: 550;
		}
	}
</style>
